import React, { Component } from "react";
import "./css/Carstlist.css";
import gouxuan from "../../images/icon/gouxuan.png";
import mobile from "../../images/icon/mobile.png";
import "../../commit.css";
import cartUpdata from "../../api/cartList/carstupdata"
import cartDelete from "../../api/cartList/carstdelelte"
import find from "../../api/cartList/cartApi"
// import cookie from "../../cookie/cookie"
import cookie from 'react-cookies'


class Carstlist extends Component {
  constructor(props) {
    super(props);

    this.state = {
      price: 0,
      num: 0,
      arr:[]
    };
  }
  componentDidMount() {
    // this.props.cartList();
    find(cookie.load('uid')).then(res=>{                          
      console.log(res.data.data)
      this.setState({
        arr:res.data.data
      })
    })

 
  }
  //如果商品全部勾选，全选则被勾中
  componentDidUpdate() {
    // 勾选的长度
    let Glength = document.querySelectorAll(".actives").length;
    //总长度
    let ALLlength = document.querySelectorAll(".lable-color").length;
    if (Glength == ALLlength) {
      let Allchose = document.querySelector(".CartFooter-chose");
      Allchose.className = "CartFooter-chose Allactive";
    } else {
      let Allchose = document.querySelector(".CartFooter-chose");
      Allchose.className = "CartFooter-chose";
    }
  }
  onChange() {}
  // 是否选中
  choose(item, index, e) {
    if (e.target.className == "actives choseImg") {
      e.target.className = "choseImg";
      //实时获取数量
      let num = document.querySelectorAll(".number")[index].innerHTML;
      let price = item.pprice * num;
      let number = this.state.num - 1; //结账个数减1
      // 价格
      this.setState({
        price: this.state.price - price,
        num: number
      });
    } else {
      e.target.className = "actives choseImg";
      let num = document.querySelectorAll(".number")[index].innerHTML; //实时获取数量
      let price = item.pprice * num;
      let number = this.state.num + 1; //结账个数加1
      this.setState({
        price: this.state.price + price,
        num: number
      });
    }
  }
  // 数量减1，价格也会随之改变，调用更新接口，更新数量
  minus(item, index, e) {
    // 点击减1，并且数量数量减1和价格也减去一件的价格
    let minus = document.querySelectorAll(".number")[index].innerHTML;
    if (minus != 1) {
      minus = minus - 1;
      let price = item.pprice * 1;
      let ischose=document.querySelectorAll(".actives")[index]
      if(ischose){
        console.log(1)
        this.setState({
          price:this.state.price-price
        })
      }
      console.log(ischose)
      }
      
    let num = document.querySelectorAll(".number")[index].innerHTML - 1;
    if (num == 1) {
      e.target.className = "minus";
    }
    if (num == 0) {
      num = 1;
      e.target.className = "minus";
    }
    document.querySelectorAll(".number")[index].innerHTML = num;
    let info={
      pprice:item.pprice,
      pname:item.pname,
      imgUrl:item.imgUrl,
      number:num,
      uid:item.uid,
      pid:item.pid,
      tokenId:item.tokenId,
    
    }
    cartUpdata(info).then(res=>{
      console.log(res)
    })
    // cookie.save("token",4455123,30)
    // console.log(cookie.load('token'))
  }
  // 数量加1  价格也会随之改变，调用更新接口，更新数量
  add(item, index, e) {
    let num = document.querySelectorAll(".number")[index].innerHTML * 1 + 1;
    
    document.querySelectorAll(".number")[index].innerHTML = num;
    let nums = document.querySelectorAll(".minus")[index];
    nums.className = "minus minus-show";
    // console.log(document.querySelectorAll(".actives").length)
    if(document.querySelectorAll(".actives").length){
      let price = item.pprice * 1;
      this.setState({
        price: this.state.price + price
      });
    }
    console.log(num)
    // 点击增加需要掉用更新接口
    let info={
      pprice:item.pprice,
      pname:item.pname,
      imgUrl:item.imgUrl,
      number:num,
      uid:item.uid,
      pid:item.pid,
      tokenId:item.tokenId,
    
    }
    cartUpdata(info).then(res=>{
      console.log(res)
    })
    
  }
  // 全选，全选时价格也随之变化
  totalPrices(){
    let cartItem = this.state.arr;
    // console.log(cartItem)
    let allchose=document.querySelector(".allchose")
    // console.log(allchose)
    let chose=document.querySelectorAll(".choseImg")
    let totalPrices=0
    let number=document.querySelectorAll(".number")
    console.log(number)
    if(document.querySelectorAll(".Allactive").length){
      allchose.className="allchose"
      for(let i=0;i<chose.length;i++){
        totalPrices=0
        chose[i].className="choseImg"
        this.setState({
          price:totalPrices,
          num:0
        })
      }
    }else{
      allchose.className="allchose Allactive"
      
      for(let i=0;i<chose.length;i++){
        chose[i].className="choseImg actives"
        let everyprice=cartItem[i].pprice*number[i].innerHTML
        totalPrices=totalPrices+everyprice
      }
      this.setState({
        price:totalPrices,
        num:number.length
      })
    } 
  }
  // 删除商品
  delete(item,index){
    console.log(item.tokenId)
    let uid = cookie.load('uid')
    // window.location.reload()
    cartDelete(item.tokenId).then(res=>{
      console.log(res)
      find(uid).then(res=>{
        this.setState({
          arr:res.data.data
        })
      })
     
    })
  }
  render() {
    // 取通过接口获取来的数据

   
    return (
      <div id="CartList">
        <ul className="CartList-ul">
          {this.state.arr.map((item, index) => {
            return (
              <li key={item.pid}>
                <div className="pro-panels">
                  <label className="label-checkbox ">
                    <input className="vam" defaultValue={this.state.msg} />
                    {/* 勾选图标 有active就是添加选中*/}
                    <i className="lable-color">
                      <img
                        src={gouxuan}
                        className="choseImg"
                        alt=""
                        onClick={this.choose.bind(this, item, index)}
                      />
                    </i>
                  </label>

                  <div className="pro-panels-right">
                    <div className="pro-panels-right-top">
                      {/* 图片 */}
                      <img src={item.imgUrl} alt="" className="pro-panels-img" />

                      <div className="pro-panels-info">
                        <p className="pro-panels-words">{item.pname}</p>
                        {/* 价格 */}
                        <div className="price">
                          <span className="new-price">￥{item.pprice}</span>
                          
                        </div>
                        {/* 数量 */}
                        <div className="count">
                          <i
                            className={
                              item.number > 1 ? "minus minus-show" : "minus"
                            }
                            onClick={this.minus.bind(this, item, index)}
                          />
                          <span className="number">{item.number}</span>
                          <i
                            className="add"
                            onClick={this.add.bind(this, item, index)}
                          />
                        </div>
                      </div>
                    </div>

                    <div className="pro-panels-right-bottom">
                      <div className="buttom-left">
                        <i>服务</i>
                        <i>选购</i>
                      </div>
                      <span>延长服务宝</span>
                      <span>碎屏服务宝</span>
                      <button onClick={this.delete.bind(this,item)}>删除</button>
                    </div>
                  </div>
                </div>
              </li>
            );
          })}
        </ul>
        <div className="CartFooter">
          <i className="CartFooter-chose">
            <img src={gouxuan} alt="" className="allchose" onClick={this.totalPrices.bind(this)} />
          </i>
          <span className="allchose">全选</span>
          <div className="accounts">
            结算(<u>{this.state.num}</u>)
          </div>
          <span className="allprice">
            总价：<strong>￥{this.state.price}</strong>
          </span>
        </div>
      </div>
    );
  }
}

export default Carstlist;
